<template>
  <div>
    <el-container>
      <!-- 筛选条件-->
      <el-header>
        <el-row :gutter="20">

          <el-col :span="10">
            <el-input size="medium" placeholder="请输入权限名称" prefix-icon="el-icon-search" style="width: 70%;border-radius: 30px" v-model="filter.name" clearable></el-input>
          </el-col>

          <el-button type="primary" @click="getData()" round>查询</el-button>

        </el-row>

      </el-header>
      <!-- 主表-->
      <el-main>
        <el-table :data=tableData style="width: 100%">
          <el-table-column label="权限主键" prop="id" v-if="false"></el-table-column>
          <el-table-column label="权限名称" prop="name"></el-table-column>
          <el-table-column label="权限描述" prop="description"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="success"  @click="handleAdd(scope.$index, scope.row)">新增权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 分页工具-->
      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3,5,7]"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Total">
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {
  list
} from '../../../api/Auth'
import {
  save
} from '../../../api/RoleAuth'

export default {
  data () {
    return {
      author: '',
      tableData: '',
      currentPage: 1,
      PageSize: 5,
      Total: 10,
      currentTotal: 0,
      filter: {
        name: ''
      },
      form: {
        id: '',
        authId: '',
        roleId: ''
      }
    }
  },
  props: {
    roleId: String
  },
  methods: {
    handleAdd (index, row) {
      // 角色与权限id
      this.form.authId = row.id
      this.form.roleId = this.roleId
      const para = {
        datajson: this.form
      }
      save(para).then(res => {
        if (res.data.successFlg) {
          this.$message({
            type: 'success',
            message: '添加权限成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: '发生错误' + res.data.errorMsg
          })
        }
      })
    },
    getData () {
      const para = {
        filter: this.filter,
        currentPage: this.currentPage,
        pageSize: this.PageSize
      }

      list(para).then(res => {
        if (res.data.successFlg === true) {
          this.tableData = res.data.data
          this.currentTotal = res.data.currentSize
          this.Total = res.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.PageSize = `${val}`
      this.getData()
    },
    handleCurrentChange (val) {
      this.currentPage = `${val}`
      this.getData()
    }
  },
  mounted () {
    // 实现自动加载
    this.getData()
  }
}
</script>

<style scoped>
.el-header {
  background-color: rgba(169, 235, 36, 0.25);
}
</style>
